<template>
<TnNavbar fixed> 指标指数 </TnNavbar>
  <view style="margin-top: 10px;display: flex;justify-content: center;align-items: center;">
    <TnSearchBox style="flex: 1;"
    v-model="searchValue"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
  <view class="menu" @click="onShowPopup">
    <TnIcon name="search-menu" size="26px" color="#fff" />
  </view>
    
</view>

<view class="tuniao-project-list">
    <view
        v-for="(item, index) in tuniaoProjectData"
        :key="index"
        class="list-item tn-shadow"
    >
        <view class="top">
			<view class="list-info">
				<!-- <view class="image">
					
					<image class="tn-image" :src="item.image" mode="aspectFill" />
				</view> -->
				<TnTitle :title="item.title" mode="vLine" assist-color="tn-red" />
				<!-- <view class="title">{{ item.title }}</view> -->
			</view>
			<!-- <view class="list-operation" v-if="item.title === '公路信息价'">
				参考含税价格<TnIcon name="topics-fill" size="24" />
			</view> -->
        </view>
        <view class="item-desc">
        <!-- {{ item.desc }} -->
			<view class="list">
				<view class="item">
					<view>单位</view>
					<view>公路公里</view>
				</view>
				<view class="item">
					<view>技术经济指标</view>
					<view>19471654.43</view>
				</view>
			</view>
			
			<view class="list">
				<view class="item jl">
					<view>占总造价百分比（%）</view>
					<view>83.47</view>
				</view>
				<view></view>
				<!-- <view class="item"></view> -->
			</view>
        </view>
    </view>
</view>

<view style="height: 100px;"></view>

<TnPopup v-model="showPopup" open-direction="bottom" :safe-area-inset-bottom="true">
    <view class="tn-p-lg"> 
        <TnTitle title="所在地区" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in regions" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="项目阶段" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in years" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="公路等级" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in prices" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="编制时间" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info"  v-for="(item, index) in periods" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>

        <view style="height: 20px;"></view>
        <view class="btns">
            <view class="btn1">重置</view>
            <view class="btn2">查询</view>
        </view>
    </view>
  </TnPopup>
</template>

<script lang="ts" setup>
import { ref }from 'vue'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'


const currentTabIndex = ref(0)
const tabsData = [
  {
    text: '推荐',
  },
  {
    text: '公路信息价',
  },
  {
    text: '建筑信息价',
  },
  {
    text: '水运信息价',
  },
  {
    text: '铁路信息价',
  },
  {
    text: '人工价',
  }
]

const showPopup = ref(false)
const onShowPopup = () => {
    showPopup.value = true
}

const regions = ['所有地市', '广东省', '广州市', '韶关市', '深圳市', '珠海市','汕头市',
'佛山市',
'江门市',
'湛江市',
'茂名市',
'肇庆市',
'惠州市',
'梅州市',
'汕尾市',
'河源市',
'阳江市',
'清远市',
'东莞市',
'中山市',
'潮州市',
'揭阳市',
'云浮市',]

const years = ['预算']


const prices = ['全部','高速公路', '一级公路', '二级公路', '三级公路', '四级公路']
const periods = ['2021','2020','2019','2018','2017','2016']


const tuniaoProjectData = ref([
    {
      id: '1',
      title: '第一部分 建筑安装工程费',
    //   image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
    image: 'https://img1.baidu.com/it/u=847554842,700654528&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
      desc: '',
    },
    {
      id: '2',
      title: '第二部分 土地使用及拆迁补偿费',
      image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
      desc: '',
    },
    {
      id: '3',
      title: '第三部分 工程建设其他费',
      image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
      desc: '',
    },
    {
      id: '4',
      title: '第四部分 预备费',
      image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
      desc: '',
    },
    {
      id: '5',
      title: '建设期贷款利息',
      image: 'https://i.52112.com/icon/jpg/256/20210730/125209/5348991.jpg',
      desc: '',
    },
    {
      id: '6',
      title: '专项费用',
      image: 'https://i.52112.com/icon/jpg/256/20210730/125209/5348991.jpg',
      desc: '',
    },
  ])

  const searchValue = ref('')
  const searchInputEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchInputEvent', value)
}
const searchBtnClickEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchBtnClickEvent', value)
}
</script>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
